<template>
	<div>
		<div class="tabs">
			<div class="tab" :class="{ active: curTab == item.value }" v-for="item in tabList" :key="item.value" @click="changeTab(item.value)">
				{{ item.name }}
			</div>
		</div>
		<div class="chart-box">
			<img @click="toLeft" src="../../image/left.png" alt="" class="chart-left" />
			<div class="chart-main" ref="envirRef"></div>
			<img @click="toRight" src="../../image/right.png" alt="" class="chart-arrow" />
		</div>
	</div>
</template>
    
<script setup lang='ts'>
import { getStatisticsMaxAndMinData } from '/@/api/largeScreen/baseView';
import { ref, reactive, markRaw } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
	leftCode: {
		type: Array,
		default: [],
	},
});
const tabList = reactive([
	{
		name: '环境温度',
		value: '0',
	},
	{
		name: '环境湿度',
		value: '1',
	},
	{
		name: '雨量',
		value: '2',
	},
]);
const curTab = ref('0');
const envirRef = ref();

const changeTab = (value: string) => {
	curTab.value = value;
	if (+value > 0) {
		hName.value = '最大值';
		lName.value = '最小值';
	} else {
		hName.value = '最高温';
		lName.value = '最低温';
	}
	startIndex.value = 0;
	getChartData();
};

const myChart = ref();
const hName = ref('最高温');
const lName = ref('最低温');
const startIndex = ref(0);
const xAxisData = ref();
const hTemperatureData = ref();
const lTemperatureData = ref();
const date = ref(new Date());

const getDateTime = (time: Date) => {
	const year = time.getFullYear();
	let month: any = time.getMonth() + 1;
	month = month >= 10 ? month : `0${month}`;
	let day: any = time.getDate();
	day = day >= 10 ? day : `0${day}`;
	return `${year}-${month}-${day}`;
};

const toLeft = () => {
	date.value = new Date(date.value.getTime() - 1000 * 60 * 60 * 24 * 7);
	getChartData();
};

const toRight = () => {
	date.value = new Date(date.value.getTime() + 1000 * 60 * 60 * 24 * 7);
	getChartData();
};

const getChartData = () => {
	const params = {
		deviceCode: props.leftCode[0],
		dateNum: 7,
		endDate: getDateTime(date.value),
	};

	getStatisticsMaxAndMinData(params).then((res) => {
		let data = res.data;
		hTemperatureData.value = [];
		lTemperatureData.value = [];
		xAxisData.value = [];
		data.map((item: any) => {
			xAxisData.value.push(item.key);
			const keyArr = ['tempVo', 'humidityVo', 'rainVo'];
			hTemperatureData.value.push(item[keyArr[+curTab.value]].max);
			lTemperatureData.value.push(item[keyArr[+curTab.value]].min);
		});
		updateOption();
	});
};

const updateOption = () => {
	const option = {
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: [hName.value, lName.value],
			textStyle: {
				color: '#FFffff', // 设置图例文字为红色
			},
		},
		grid: {
			// 错误的做法：会限制图表高度
			// height: '50%'

			// 正确的做法：只设置边距
			top: 40,
			bottom: 40,
			left: 30,
			right: 30,
		},

		xAxis: {
			type: 'category',
			data: xAxisData.value,
			axisLabel: {
				color: '#C9FFFF',
				rotate: 45,
			},
			axisLine: {
				show: true, // 显示轴线
				lineStyle: {
					color: '#005958', // 设置轴线颜色
					width: 1, // 设置轴线宽度
				},
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#C9FFFF',
			},
			axisLine: {
				show: true, // 显示轴线
				lineStyle: {
					color: '#005958', // 设置轴线颜色
					width: 1, // 设置轴线宽度
				},
			},
			axisTick: {
				show: false, // 显示刻度线
			},

			splitLine: {
				show: false, // 不显示网格线（如果需要）
			},
		},
		series: [
			{
				name: hName.value,
				type: 'line',
				smooth: true, // 设置为曲线
				data: hTemperatureData.value,
				lineStyle: {
					width: 3,
					color: '#159FFF',
				},
				itemStyle: {
					color: '#159FFF',
				},
			},
			{
				name: lName.value,
				type: 'line',
				smooth: true, // 设置为曲线
				data: lTemperatureData.value,
				lineStyle: {
					width: 3,
					color: '#17F9AD',
				},
				itemStyle: {
					color: '#17F9AD',
				},
			},
		],
	};
	console.log(option);
	myChart.value.setOption(option);
};

onMounted(() => {
	myChart.value = markRaw(echarts.init(envirRef.value));
	getChartData();
});
</script>
    <style lang='less' scoped>
.tabs {
	display: flex;
	padding: 0 9px;
	margin: 0 auto;
	margin-bottom: 8px;
	justify-content: center;
	width: 280px;

	.tab {
		min-width: 33.3%;
		max-width: 33.3%;
		background-size: 100% 100%;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 14px;
		height: 39px;
		color: #fff;
		&.active {
			background: url('../../image/bg_tab.png') no-repeat;
			background-size: 100% 100%;
		}
	}
}

.chart-box {
	display: flex;
	align-items: center;
	.chart-main {
		width: 320px;
		height: 200px;
	}
	.chart-left {
		margin-right: 15px;
		cursor: pointer;
		margin-left: 12px;
	}

	.chart-arrow {
		cursor: pointer;
	}
}
</style>